<template>
  <div id="myCode">
    <Header :showheaderLeft="false" :showBack="true" :isTitle="true" :showTitle="true"></Header>
    <div class="rootMain">
      <!-- <div class="top">
        <img src="@/assets/img/common/GCC@2x.png" alt />
        <p>GAME CONTINENT COIN</p>
      </div>-->
      <!-- <div class="topImg">
        <p>GAME CONTINENT COIN</p>
      </div>-->
      <div class="qrcode">
        <div class="codeImg">
          <img :src="qrcode" alt id="saveMyCode" />
          <p>{{$t('m.saveCode')}}</p>
        </div>
        <p class="warning" style="padding:0 .4rem;">{{$t('m.saveTips')}}</p>
        <p>
          <a href="javascript:;" @click="copyShaneUrl()">{{$t('m.saveCode3')}}</a>
        </p>
        <input type="text" :value="code" id="copyUrl" v-show="false" />
      </div>
    </div>
  </div>
</template>
<script>
import Services from "@/service/index.js";
import { mapMutations, mapState } from "vuex";
import Header from "@/components/header";
import { Dialog, Toast } from "vant";
import QRCode from "qrcode";
export default {
  data() {
    return {
      code: "",
      url: "",
      qrcode: "",
      Html5Plus: false,
      time: ""
    };
  },
  created() {
    this.code = this.$route.query.code;
    this.changeTitle(this.$t("m.invitationCode"));
    this.url = window.location.href.replace("myCode", "reg");
    if (navigator.userAgent.indexOf("Html5Plus") > -1) {
      this.Html5Plus = true;
    } else {
      this.Html5Plus = false;
    }
  },
  components: { Header, QRCode },
  computed: {},
  mounted() {
    //生成二维码
    QRCode.toDataURL(this.url, {
      version: 7, //这个是版本号，
      errorCorrectionLevel: "Q", //这个是容错率,(建议选较低)更高的级别可以识别
      width: 400,
      height: 400, //设置二维码图片大小
      margin: 0
    })
      .then(url => {
        //这个url是二维码生成地址，也就是相当于图片地址
        //        console.log(url);
        this.qrcode = url; //这个是vue实例全局的变量，赋值给他。后面会用在img的src属性上
      })
      .catch(err => {
        console.error(err); //这里看不懂的话去看一下Promise（then, catch）
      });
    if (this.Html5Plus) {
      this.mui.init({
        gestureConfig: {
          longtap: true
        }
      });
      var that = this;
      this.mui.plusReady(function() {
        // 长按保存二维码
        document
          .getElementById("saveMyCode")
          .addEventListener("longtap", function(event) {
            var name = event.target.tagName;
            that.getNowTime();
            if (name.toLowerCase() === "img") {
              // var imgUrl = event.target.src;
              var baseImgFile = (function(uid, base64, quality) {
                quality = quality || 10;
                // callback = callback || $.noop;
                var bitmap = new plus.nativeObj.Bitmap();
                // 从本地加载Bitmap图片
                bitmap.loadBase64Data(
                  base64,
                  function() {
                    bitmap.save(
                      "_doc/" + uid + "_" + that.time + ".jpg",
                      {
                        overwrite: true,
                        quality: quality
                      },
                      function(i) {
                        plus.gallery.save(
                          "_doc/" + uid + "_" + that.time + ".jpg",
                          function() {
                            Toast(that.$t("m.saveCode4"));
                          }
                        );
                      },
                      function(e) {
                        Toast(that.$t("m.saveCode5"));
                      }
                    );
                  },
                  function(e) {
                    Toast(that.$t("m.saveCode5"));
                  }
                );
              })("qrcode", that.qrcode, 100);
            }
          });
      });
    }
  },
  methods: {
    ...mapMutations(["changeTitle", "changetabbarIndex"]),
    getNowTime() {
      this.time = new Date().getTime();
    },
    copy(id, attr) {
      let target = null;
      if (attr) {
        target = document.createElement("div");
        target.id = "tempTarget";
        target.style.opacity = "0";
        if (id) {
          let curNode = document.querySelector("#" + id);
          target.innerText = curNode[attr];
        } else {
          target.innerText = attr;
        }
        document.body.appendChild(target);
      } else {
        target = document.querySelector("#" + id);
      }
      try {
        let range = document.createRange();
        range.selectNode(target);
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range);
        document.execCommand("copy");
        window.getSelection().removeAllRanges();
        Toast(this.$t("m.successfulCopy"));
      } catch (e) {
        Toast(this.$t("m.replicationFailed"));
      }
      if (attr) {
        target.parentElement.removeChild(target);
      }
    },
    copyShaneUrl() {
      this.copy("copyUrl", "value");
    }
  }
};
</script>
<style lang="scss" scoped type="text/scss">
#myCode {
  .rootMain {
    top: 0.88rem;
    height: calc(100% - 0.88rem);
    overflow-y: auto;
    .topImg {
      p {
        margin-top: 0.2rem;
        color: #fff;
      }
    }
    .qrcode {
      text-align: center;
      height: calc(100% - 3.4rem);
      // background: #434551;
      padding-top: 2rem;
      .codeImg {
        margin: 0 auto;
        margin-bottom: 0.2rem;
        width: 4.4rem;
        height: 5rem;
        padding: 0.2rem 0.2rem 0.8rem;
        overflow: hidden;
        background: #fff;
        img {
          width: 4rem;
          height: 4rem;
          margin-bottom: 0.1rem;
        }
        border: 1px solid #ddd;
        p {
          color: #a8a7ab;
        }
      }
      .warning {
        color: #fd6262;
        font-size: 0.22rem;
        margin-bottom: 0.4rem;
      }
      > p {
        a {
          margin: 0 auto;
          width: 80%;
          height: 0.85rem;
          display: inline-block;
          line-height: 0.85rem;
          font-size: 0.28rem;
          letter-spacing: 0.05rem;
          text-align: center;
          border-radius: 0.1rem;
          color: #fff;
          background: linear-gradient(to right, #43434e, #727181);
        }
      }
    }
  }
}
</style>